<template>
  <div>
    <div style="display: flex;flex-direction: row;justify-content: space-between;align-items:center; background-color: #FAFBFD;padding: 13px 30px;border-radius: 10px 10px 0 0;">
      <div style="font-size: 20px;color: #404040;">筛选</div>
      <operation-button
        :button-group="buttonGroup"
        @operateEmit="operateEmit"
      />
    </div>
    <div style="padding: 30px; background-color: #fff;font-size:15px; color: #5A5A5A;border-radius: 0 0 10px 10px;">
      <div style="display: flex;">
        <span style="height: 40px;line-height: 40px;margin-bottom: 15px;">类别：</span>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in categoryList" :key="index" :label="item.name" :name="item.key" />
        </el-tabs>
      </div>
      <search-form
        :search-form="searchForm"
        @searchFormEmit="searchFormEmit"
        @refreshForm="refreshForm"
      />
    </div>

  </div>
</template>
<script>
import OperationButton from '@/components/OperationButton/index.vue'
import SearchForm from '@/components/SearchForm/index.vue'

export default {
  name: 'BasicTable',
  components: { OperationButton, SearchForm },
  props: {
    buttonGroup: { type: Object, default: null },
    searchForm: { type: Object, default: null }
  },
  data() {
    return {
      activeName: 0,
      categoryList: [
        { key: 0, name: '全部' },
        { key: 1, name: '勘察企业' },
        { key: 2, name: '设计企业' }
      ],
      b_data: {}
    }
  },
  methods: {
    // 操作按钮
    operateEmit(v) {
      this.$emit('operateEmit2', v)
    },
    // tabs
    handleClick(tab, event) {
      console.log(tab, event)
    },
    searchFormEmit(v) {
      this.b_data = v
      this.$emit('searchFormEmit2', this.b_data)
    },
    refreshForm(v) {
      this.$emit('refreshForm2', v)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__active-bar{
  height: 0 !important;
}
::v-deep .el-tabs__nav-wrap::after{
  height: 0 !important;
}
::v-deep .el-tabs__item.is-active{
  background-color: #EBF6FF;
  border-radius: 5px;
}
::v-deep .el-tabs--top .el-tabs__item.is-top{
  padding: 0 20px;
}
</style>
